﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UploadZone.ascx.cs" Inherits="SonCa.SocialNetwork.Web.ASCX.UploadZone" %>
<%@ Import Namespace="SonCa.SocialNetwork.Web.HelperClass" %>

<script src="../js/jquery.horizontal.scroll.js" type="text/javascript"></script>
<script src="../js/jquery.uploadify.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var isSelectFile = false;
    var fileName = "";
    var accountID_upload = "";

    function SaveStatus() {
        var statusText = $('#txtStatus').val();
        if (statusText.length != 0) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ statusText: statusText, statusType: 1,fileNameUpdate: "" }),
                url: "../Services/AjaxService.svc/SaveStatus",
                dataType: "json",
                success: function (response) {
                    $('#friendsDisplay').prepend(response.d);
                    $('#txtStatus').val("");
                },
                error: function (response) { alert(response.d); }
            });
        }
    }

    function PostPhoto() {
        if (isSelectFile == true) {
            var statusPhoto = $("#txtStatusWithImage").val();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ statusText: statusPhoto, statusType: 2, fileNameUpdate: fileName }),
                url: "../Services/AjaxService.svc/SaveStatus",
                dataType: "json",
                success: function (response) {
                    if (response.d != "") {
                        $('#friendsDisplay').prepend(response.d);
                        $("#txtStatusWithImage").val("");
                        $("#horiz_container").empty();
                        isSelectFile = false;
                        $.ajax({
                            type: "post",
                            url: "../Services/AjaxService.svc/DeleteUploadTemps",
                            data: '{"filename": "' + fileName + '","folder": "Photos"}',
                            contentType: "application/json; charset=utf-8;",
                            dataType: "json",
                            success: function () {

                            }
                        });
                    }
                    else
                        alert("Có lỗi xảy ra, vui lòng thử lại sau vài phút.");
                },
                error: function (response) { alert(response.d); }
            });
        }
    }

    function PostVideo() {
        if (isSelectFile == true) {
            var statusVideo = $("#txtStatusWithVideo").val();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ statusText: statusVideo, statusType: 3, fileNameUpdate: fileName }),
                url: "../Services/AjaxService.svc/SaveStatus",
                dataType: "json",
                success: function (response) {
                    if (response.d != "") {
                        $('#friendsDisplay').prepend(response.d);
                        $("#txtStatusWithVideo").val("");
                        $("#horiz_container_upvideo").empty();
                        isSelectFile = false;
                        $.ajax({
                            type: "post",
                            url: "../Services/AjaxService.svc/DeleteUploadTemps",
                            data: '{"filename": "' + fileName + '","folder": "Videos"}',
                            contentType: "application/json; charset=utf-8;",
                            dataType: "json",
                            success: function () {

                            }
                        });
                    }
                    else
                        alert("Có lỗi xảy ra, vui lòng thử lại sau vài phút.");
                },
                error: function (response) { alert(response.d); }
            });
        }
    }

    $(document).ready(function () {
        accountID_upload = $("#<%=hdfAccountID_upload.ClientID%>").val();
        $(".menu > li").click(function (e) {
            switch (e.target.id) {
                case "news":
                    $("#news").addClass("active");
                    $("#tutorials").removeClass("active");
                    $("#links").removeClass("active");
                    $("div.news").fadeIn();
                    $("div.tutorials").css("display", "none");
                    $("div.links").css("display", "none");
                    break;
                case "tutorials":
                    $("#news").removeClass("active");
                    $("#tutorials").addClass("active");
                    $("#links").removeClass("active");
                    $("div.tutorials").fadeIn();
                    $("div.news").css("display", "none");
                    $("div.links").css("display", "none");
                    break;
                case "links":
                    $("#news").removeClass("active");
                    $("#tutorials").removeClass("active");
                    $("#links").addClass("active");
                    $("div.links").fadeIn();
                    $("div.news").css("display", "none");
                    $("div.tutorials").css("display", "none");
                    break;
            }
            $('#horiz_container_outer').horizontalScroll();
        });

        $("#file_upload_photo").uploadify({
            buttonImage: '../img/browse-btn.png',
            fileTypeDesc: 'Image Files',
            fileTypeExts: '*.gif; *.jpg; *.png; *.jpeg',
            sizeLimit: '3072',
            height: 30,
            swf: '../css/uploadify.swf',
            uploader: '../Files/ReceiveFiles.aspx?AccountID=' + accountID_upload,
            width: 120,
            onUploadSuccess: function (file, data, response) {
                $("#horiz_container").append("<li><img src='../Files/Photos/Temps/" + file.name + "' width='150' height='150' /></li>");
                isSelectFile = true;
                fileName = file.name;
                //alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
            }
        });

        $("#file_upload_video").uploadify({
            buttonImage: '../img/browse-btn.png',
            fileTypeDesc: 'Video Files',
            fileTypeExts: '*.wmv; *.flv; *.swf; *.mp4; *.ogg; *.webm',
            sizeLimit: '10240',
            height: 30,
            swf: '../css/uploadify.swf',
            uploader: '../Files/ReceiveFiles.aspx?AccountID=' + accountID_upload,
            width: 120,
            onUploadSuccess: function (file, data, response) {
                var append_video = "<li>" +
                                        "<video id='video' class='video-js vjs-default-skin' controls preload='none' width='200' height='140' poster='../img/slide.jpg' data-setup='{'example_option':true}'>" +
                                            "<source src='../Files/Videos/Temps/" + file.name + "' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2'' />" +
                                            "<source src='../Files/Videos/Temps/" + file.name + "' type='video/webm; codecs='vp8, vorbis'' />" +
                                            "<source src='../Files/Videos/Temps/" + file.name + "' type='video/ogg; codecs='theora, vorbis'' />" +
                                            "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='300' height='200' align='middle'>" +
                                                "<param name='expressinstall' value='../css/expressInstall.swf'>" +
                                                "<param name='swfversion' value='9.0.0'>" +
                                                "<param name='allowScriptAccess' value='sameDomain' />" +
                                                "<param name='movie' value='../Files/Videos/Temps/" + file.name + "' />" +
                                                "<param name='quality' value='high' />" +
                                                "<embed id='video_source_4' src='' quality='high' width='200' height='140' name='tech' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />" +
                                            "</object>" +
                                        "</video>" +
                                    "</li>";
                $("#horiz_container_upvideo").append(append_video);
                isSelectFile = true;
                fileName = file.name;
                //alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
            }
        });
    });    
</script>

<div id="container">
    <asp:HiddenField ID="hdfAccountID_upload" runat="server" />
    <ul class="menu">
        <li id="news" class="active">Update Status</li>
        <li id="tutorials">Upload Photos</li>
        <li id="links">Upload Videos</li>
    </ul>
    <span class="clear"></span>

    <!-- Post comment -->
    <div class="content news">        
        <textarea id="txtStatus" class="StatusTxt" placeholder="What're you thinking..."></textarea>
        <img src="../img/share.png" id="btnStatus" class="shareBtn" onclick="SaveStatus(); return false;" style="cursor:pointer" />
    </div>
    <!-- End Post comment -->

    <!-- Upload Photo -->
    <div class="content tutorials">                
        <div id="wrap">
            <textarea id="txtStatusWithImage" class="StatusTxt" placeholder="Comment for your image..."></textarea>
            <h4>Choose Photo from your computer</h4><br />
            <input id="file_upload_photo" type="file" multiple="true" accept="image/*"/>
            <ul id="horiz_container_outer">
                <li id="horiz_container_inner">
                    <ul id="horiz_container"></ul>
                </li>
            </ul>
        </div>
        <div id="scrollbar">
            <a id="left_scroll" class="mouseover_left" href="#"></a>
            <div id="track">
                <div id="dragBar"></div>
            </div>
            <a id="right_scroll" class="mouseover_right" href="#"></a>
        </div><br />
        <img src="../img/share.png" id="btnUploadPhoto" class="shareBtn" style="cursor:pointer" onclick="PostPhoto(); return false;" />
    </div>
    <!-- End Upload Photo -->

    <!-- Upload Video -->
    <div class="content links">
        <div style="margin:0 auto">
            <textarea id="txtStatusWithVideo" class="StatusTxt" placeholder="Comment for your video..."></textarea>
            <h4>Choose video from your computer</h4><br />
            <input id="file_upload_video" name="file_upload" type="file" multiple="true" accept="video/*"/><br />
            <ul id="horiz_container_outer_upvideo">
                <li id="horiz_container_inner_upvideo">
                    <ul id="horiz_container_upvideo"></ul>
                </li>
            </ul>
        </div>        
        <div id="scrollbar_upvideo">
            <a id="left_scroll_upvideo" class="mouseover_left" href="#"></a>
            <div id="track_upvideo">
                <div id="dragBar_upvideo"></div>
            </div>
            <a id="right_scroll_upvideo" class="mouseover_right" href="#"></a>
        </div><br />
        <img src="../img/share.png" id="btnUploadVideo" class="shareBtn" style="cursor:pointer" onclick="PostVideo(); return false;" />
    </div>
    <!-- End Upload Video -->
</div>